Hello LUYEE

| front end css sass |

Sass - CSS预处理工具

Sass是Ruby写的，先装Ruby。我是Mac OS系统

brew install ruby

然后装Sass

gem install sass

根据下面这个简单教程，把之前的CSS文件直接改写成Sass风格的。《sass十分钟入门》

/* _base.scss */
$baseBlue: #72d3fc;

@mixin box-sizing($sizing) {
    box-sizing: $sizing;
    -moz-box-sizing:$sizing; /* Firefox */
    -webkit-box-sizing:$sizing; /* Safari */
}

div {
    @include box-sizing(border-box);
}

/* fluid.scss */
@import 'base';     /* 全页整体属性在_base.scss */

div.text{   /* 所有文本的基本属性 */
    font-family: Courier;
    color: white;
    display: inline-block;  /*以下5行用来水平，垂直居中的漂亮的处理方法*/
    position  : relative;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%,-50%);
}

div.container {/* “液态”填充屏幕的关键 */
    height: 800px; /* 高度不能用百分比 */
    width: 100%;
}

div.header {
    height: 15%;
    width: 100%;
    background-color: darken($baseBlue,20%);
    div.text{/* 套嵌 */
        font-size: 50px;
    }
}

div.middle_part{
    height: 75%;
    width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
}

div.menu {
    height: 100%;
    width: 15%;
    float: left;
    padding-right: 1px;
    background-color: darken($baseBlue,10%);
}

div.menu_button {
    height: 9%;
    width: 100%;
    margin-bottom: 1%;
    float: left;
    background-color: $baseBlue;
    div.text{/* 套嵌 */
        font-size: 20px;
    }
}

div.content {
    height: 100%;
    width: 85%;
    float: left;
    background-color: $baseBlue;
    div.text{/* 套嵌 */
        font-size: 100px;
    }
}

div.footer {
    height: 10%;
    width: 100%;
    padding-top: 1px;
    background-color: darken($baseBlue,20%);
    div.text{/* 套嵌 */
        font-size: 20px;
    }
}

终端里执行下面命令，把sass解析成css格式样式表。

sass css/fluid.scss css/fluid.css

生成以后的fluid.css和之前的功能一样，甚至更强，比如颜色的darken()函数能直接设置更深10%，20%的蓝色这样的功能。

@charset "UTF-8";
div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */ }

/* 全页整体属性在_base.scss */
div.text {
  /* 所有文本的基本属性 */
  font-family: Courier;
  color: white;
  display: inline-block;
  /*以下5行用来水平，垂直居中的漂亮的处理方法*/
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

div.container {
  /* “液态”填充屏幕的关键 */
  height: 800px;
  /* 高度不能用百分比 */
  width: 100%; }

div.header {
  height: 15%;
  width: 100%;
  background-color: #0eb4fa; }
  div.header div.text {
    /* 套嵌 */
    font-size: 50px; }

div.middle_part {
  height: 75%;
  width: 100%;
  padding-top: 1px;
  padding-bottom: 1px; }

div.menu {
  height: 100%;
  width: 15%;
  float: left;
  padding-right: 1px;
  background-color: #40c3fb; }

div.menu_button {
  height: 9%;
  width: 100%;
  margin-bottom: 1%;
  float: left;
  background-color: #72d3fc; }
  div.menu_button div.text {
    /* 套嵌 */
    font-size: 20px; }

div.content {
  height: 100%;
  width: 85%;
  float: left;
  background-color: #72d3fc; }
  div.content div.text {
    /* 套嵌 */
    font-size: 100px; }

div.footer {
  height: 10%;
  width: 100%;
  padding-top: 1px;
  background-color: #0eb4fa; }
  div.footer div.text {
    /* 套嵌 */
    font-size: 20px; }

/*# sourceMappingURL=fluid.css.map */

Sass - An extension of CSS

| front end css sass |

Sass - CSS预处理工具